import React, { PureComponent } from 'react'
import { Modal, Table } from 'antd'
import TreeSelector from '@/components/TreeSelector'

// 授权用户窗口
export default class RoleUser extends PureComponent {
  // 保存模块关系
  handleSubmit = () => {
    const { roleId } = this.props
    const { checked } = { ...this.props.data }

    let users = []
    if (checked && checked.length > 0) {
      users = checked.map(item => ({ userId: item }))
    }
    this.props.dispatch({
      type: 'role/saveUser',
      payload: {
        id: roleId,
        users,
      },
    })
  }

  // 保存已选
  handleSelectRows = checkedKeys => {
    const { data } = { ...this.props.data }
    this.props.dispatch({
      type: 'role/updateState',
      payload: {
        userData: {
          data,
          checked: checkedKeys,
        },
      },
    })
  }

  handleSearchChange = v => {
    const { roleId } = this.props
    this.props.dispatch({
      type: 'role/listUser',
      payload: {
        roleId,
        deptId: v,
      },
    })
  }

  // 表格动作触发事件
  handleListChange = (pg, filtersArg, sorter) => {
    const { dispatch, roleId } = this.props
    const { pagination } = this.props.data

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj }
      // eslint-disable-next-line no-undef
      newObj[key] = getValue(filtersArg[key])
      return newObj
    }, {})

    const params = {
      page: pg.current,
      pageSize: pg.pageSize,
      roleId,
      ...filters,
    }
    if (sorter.field && pagination.current === pg.current) {
      params.sorter = `${sorter.field}_${sorter.order}`
    }

    dispatch({
      type: 'role/listUser',
      payload: params,
    })
  }

  render() {
    const { operateType, loading } = this.props

    const {
      data: { list, pagination },
      checked,
    } = { ...this.props.data }

    const column = [
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '用户名',
        dataIndex: 'account',
      },
      {
        title: '所属部门',
        dataIndex: 'deptName',
      },
    ]

    const rowSelection = {
      selectedRowKeys: checked,
      onChange: selectedKeys => {
        this.handleSelectRows(selectedKeys)
      },
    }
    const paginationProps = {
      showSizeChanger: false,
      showQuickJumper: true,
      ...pagination,
    }
    return (
      <Modal
        confirmLoading={loading}
        visible={operateType === 'User'}
        title="选择授权用户  "
        okText="保存"
        cancelText="关闭"
        onOk={() => this.handleSubmit()}
        onCancel={() => this.props.handleCancel()}
        width="60%"
        bodyStyle={{ maxHeight: 500, padding: 0, overflowY: 'auto', overflowX: 'auto' }}
      >
        <div style={{ marginLeft: 15, marginTop: 15 }}>
          所属部门：
          <TreeSelector
            url="/dept/findDetpList"
            showAll={false}
            style={{ width: 240 }}
            labelProp="title"
            onSelect={v => this.handleSearchChange(v)}
          />
        </div>
        {/* 右侧列表 */}
        <Table
          dataSource={list}
          size="small"
          style={{ marginTop: 15 }}
          columns={column}
          pagination={paginationProps}
          rowKey={record => record.id}
          rowSelection={rowSelection}
          onChange={this.handleListChange}
        />
      </Modal>
    )
  }
}
